<template>
  <div class="model-container">
    <div class="listName">企业信息</div>
    <!--搜索-->
    <el-card shadow="never" v-if="this.neid=='1'">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="10" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">企业：</el-col>
                <el-col :xl="17" :lg="15" :md="16" :sm="16">
                  <el-form-item prop="userName">
                    <el-input v-model="seacherParam.name" size="small" placeholder="企业名称"/>
                  </el-form-item>
                </el-col>
              </el-col>

              <!--<el-col :xl="5" :lg="10" :md="8" :sm="8">
                <el-col :xl="7" :lg="5" :md="8" :sm="8" class="input-name">所属门店：</el-col>
                <el-col :xl="17" :lg="15" :md="16" :sm="16">

                  <el-select  v-model="seacherParam.shopName" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"/>

                  </el-select>


                </el-col>
              </el-col>-->
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix" v-if="this.neid=='1'">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(0)">删除</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据"
                  @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>
          <el-table-column align="center" prop="name" label="公司名称"/>
          <el-table-column align="center" prop="abbreviationCompany" label="公司简称"/>

          <el-table-column align="center" prop="registrationDate" label="注册时间"/>

          <el-table-column align="center" prop="managerMobile" label="注册电话"/>


          <el-table-column align="center" prop="accountOpeningTime" label="开户时间"/>

          <el-table-column align="center" prop="expirationTime" label="到期时间"/>
          <el-table-column align="center" prop="contactPerson" label="联系人"/>

          <el-table-column align="center" prop="contactMobile" label="联系电话"/>

          <el-table-column align="center" prop="enterpriseAddress" label="联系地址"/>


          <el-table-column align="center" label="企业logo图片">
            <template slot-scope="scope">
              <img :src="scope.row.logUrl" width="50px" height="50px">
            </template>
          </el-table-column>

          <!--  <el-table-column align="center" prop="logUrl" label="logo"/>-->

          <!-- <el-table-column align="center" prop="otherDescription" label="其他描述"/>

           <el-table-column align="center" label="是否可用">
             <template slot-scope="scope">{{ scope.row.isAvailable ===1 ? '是' : '否' }}</template>
           </el-table-column>

           <el-table-column align="center" label="是否锁定">
             <template slot-scope="scope">{{ scope.row.loginLockStatus === 1 ? '是' : '否' }}</template>
           </el-table-column>-->

          <el-table-column align="center" label="操作" width="200px"
                           v-if="this.roleId=='1' || this.roleId =='1119070633971879938'">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon"
                         @click="edit(scope.row)"/>

              <el-button title="删除" v-if="neid==='1'" type="warning" circle icon="el-icon-delete" class="table-icon"
                         @click="del(scope.row)"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="30%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon
               class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="企业名" prop="name">
            <el-input v-model="dialogBindData.name" size="small" type="text" placeholder="请输入企业名"/>
          </el-form-item>
          <el-form-item label="公司简称" prop="abbreviationCompany">
            <el-input v-model="dialogBindData.abbreviationCompany" size="small" type="text" placeholder="请输入公司简称"/>
          </el-form-item>
          <el-form-item label="注册时间" prop="registrationDate">
            <el-input v-model="dialogBindData.registrationDate" size="small" type="date" placeholder="请选择注册时间"/>
          </el-form-item>
          <!--<el-form-item label="所属角色" prop="roleIds">
            <el-select v-model="dialogBindData.roleName" size="small" placeholder="请选择">
              <el-option
                v-for="item in roleList"
                :key="item.roleId"
                :label="item.name"
                :value="item.roleId"/>
              <el-option/>


            </el-select>
          </el-form-item>-->
          <el-form-item label="注册电话" prop="managerMobile">
            <el-input v-model="dialogBindData.managerMobile" size="small" type="text" placeholder="请输入注册电话"/>
          </el-form-item>
          <el-form-item label="开户时间" prop="accountOpeningTime">
            <el-input v-model="dialogBindData.accountOpeningTime" size="small" type="date" placeholder="请选择开户时间"/>
          </el-form-item>
          <el-form-item label="到期时间" prop="expirationTime">
            <el-input v-model="dialogBindData.expirationTime" size="small" type="date" placeholder="请选择到期时间"/>
          </el-form-item>
          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="dialogBindData.contactPerson" size="small" type="text" placeholder="请输入联系人"/>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactMobile">
            <el-input v-model="dialogBindData.contactMobile" size="small" type="text" placeholder="联系电话"/>
          </el-form-item>

          <el-form-item label="联系地址" prop="enterpriseAddress">
            <el-input v-model="dialogBindData.enterpriseAddress" size="small" type="text" placeholder="联系地址"/>
          </el-form-item>



          <el-form-item label="logo图片" prop="logUrl" class="three">
            <upLoadImg v-if="isRouterAlive" :dialog-type="dialogType" :img-logo-url="dialogBindData.logUrl"
                       @emitSuccess="successImgFun"/>

          </el-form-item>

          <el-form-item label="企业等级" prop="dialogBindData.sellerLevelId" v-if="neid=='1'">
            <el-select v-model="dialogBindData.sellerLevelId" size="small" placeholder="请选择">
              <el-option
                v-for="item in shopLevel"
                :key="item.id"
                :label="item.level"
                :value="item.id"/>
              <el-option/>


            </el-select>
          </el-form-item>
          <!--<el-form-item label="账户是否可用" prop="isAvailable">
            <el-radio-group v-model="dialogBindData.isAvailable">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>-->
          <!--<el-form-item label="是否锁定" prop="loginLockStatus">
            <el-radio-group v-model="dialogBindData.loginLockStatus">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>-->
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import * as system from '../../api/system'
  import {isvalidNull, validatePhone} from '../../utils/validate'
  import upLoadImg from '../../components/UpLoadImg_b2b2c'

  export default {
    components: {upLoadImg},
    data() {
      const merchantsPhone = (rule, value, callback) => {
        if (!isvalidNull(value)) {
          callback(new Error('请输入手机号码'))
        } else if (!validatePhone(value)) {
          callback(new Error('请输入正确手机号码'))
        } else {
          callback()
        }
      }
      const passwordOne = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.dialogBindData.password !== '') {
            this.$refs.dialogBindData.validateField('password')
          }
          callback()
        }
      }
      const passwordTow = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.dialogBindData.confirmPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        shopLevel: {},
        isRouterAlive: true,
        neid: '',
        // 页面搜索
        seacherParam: {
          name: ''
        },
        shopName: '',

        abbreviationCompany: '',//公司简称
        name: '',//公司名称
        registrationDate: '',//注册时间
        managerMobile: '',//注册电话
        accountOpeningTime: '',//开户时间
        expirationTime: '',//到期时间
        contactPerson: '',//联系人
        enterpriseAddress: '',//企业地址
        logUrl: '',//logo图片
        otherDescription: '',//其他描述
        shopId: '',
        roleNames: '',
        searchShow: false,
        enterpriseName: '',
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        datavalID: [],
        typeStatus: [{id: 0, name: '全部'}, {id: 1, name: '可用'}, {id: 2, name: '不可用'}],
        typeStatusvalue: 0,
        // 角色列表
        roleList: null,
        /* 门店下拉选项*/
        options: null,
        roleId:'',
        // 提交内容
        dialogBindData: {
          userId: null,
          userName: '',
          realName: '',
          password: '',
          confirmPwd: '',
          roleIds: '',
          email: '',

          mobilePhone: '',
          telPhone: '',
          memo: '',
          isAvailable: 1,
          loginLockStatus: 0,
          roleNames: '',
          enterpriseName: '',
          abbreviationCompany: '',//公司简称
          name: '',//公司名称
          registrationDate: '',//注册时间
          managerMobile: '',//注册电话
          accountOpeningTime: '',//开户时间
          expirationTime: '',//到期时间
          contactPerson: '',//联系人
          enterpriseAddress: '',//企业地址
          logUrl: '',//logo图片
          otherDescription: '',//其他描述
          id: null,//企业id


        },
        rules: {
          userName: [
            {required: true, message: '请输入用户账号', trigger: 'blur'}
          ],
          realName: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'}
          ],
          confirmPwd: [
            {required: true, validator: passwordOne, trigger: 'blur'}
          ],
          password: [
            {required: true, validator: passwordTow, trigger: 'blur'}
          ],
          mobilePhone: [
            {required: true, validator: merchantsPhone, trigger: 'blur'}
          ],
          roleIds: [
            {required: true, message: '请选择所属角色', trigger: 'blur'}
          ]
        },


      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增系统用户'
        }
        if (this.dialogType === 2) {
          return '编辑系统用户'
        } else {
          return '查看'
        }
      }
    },
    beforeMount() {
      this.getList()
      // this.selectOneById()
      this.getNeidByUser()

    },
    methods: {
      getShopLevel() {

        system.getShopLevel().then(res => {
          debugger
          this.shopLevel = res.data.data.records
        })
      },

      getNeidByUser() {

        system.getNeidByUser().then(res => {
debugger
          this.neid = res.data.data.neid
          this.roleId=res.data.data.roleId
        })
      },
      successImgFun(data) {
        debugger
        this.dialogBindData.logUrl = data
      },
      seachFun() {
        const param = {
          current: 1,
          size: this.pageSize,
          name: this.seacherParam.name,

        }
        system.getEnterpriseList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          console.log(this.dataOption)

          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      getList() {
        const param = {
          current: this.pageNo,
          size: this.pageSize
        }
        system.getEnterpriseList(param).then(res => {

          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records

          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })

      },
      // 新增
      add() {
        this.dialogType = 1
        this.dialogState = true
        this.isRouterAlive = true
        this.getShopLevel()
      },
      // 编辑
      edit(data) {
        this.dialogType = 2
        this.dialogState = true
        this.isRouterAlive = true
        this.getShopLevel()
        this.reBindData(data)


      },
      // 提交
      submmitFun() {
        debugger
        const param = {
          name: this.dialogBindData.name,
          abbreviationCompany: this.dialogBindData.abbreviationCompany,
          registrationDate: this.dialogBindData.registrationDate,
          managerMobile: this.dialogBindData.managerMobile,
          accountOpeningTime: this.dialogBindData.accountOpeningTime,
          expirationTime: this.dialogBindData.expirationTime,
          contactPerson: this.dialogBindData.contactPerson,
          contactMobile: this.dialogBindData.contactMobile,
          enterpriseAddress: this.dialogBindData.enterpriseAddress,
          logUrl: this.dialogBindData.logUrl,
          sellerLevelId: this.dialogBindData.sellerLevelId
        }
        if (this.dialogType !== 1) {
          param.id = this.dialogBindData.id
        }
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 1) {
              system.addEnterpriseList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            } else {
              debugger
              system.editorEnterpriseList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            }
          } else {
            return false
          }
        })
      },
      // 删除
      changeFun(data) {
        this.datavalID = data
      },
      del(data) {
        if (this.datavalID.length === 0 && data === 0) {
          this.$message({
            type: 'warning',
            message: '请选需要删除的企业'
          })
          return false
        }
        this.$confirm('确定要删企业吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delList(data)
        })
      },
      delList(data) {
        const classID = []
        if (data === 0) {
          for (const val of this.datavalID) {
            classID.push(val.id)
          }
        } else {
          classID.push(data.id)
        }
        system.delEnterpriseList(classID).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
            this.dialogState = false
          }
        })
      },
      // 角色列表
      getRoleList(data) {
        const param = {
          current: 1,
          size: 3000
        }
        system.getRoleList(param).then(res => {
          console.log('角色列表', res)
          this.roleList = res.data.data.records
        })
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.seacherParam.name = ''
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          if (key === 'isAvailable') {
            this.dialogBindData[key] = 1
          } else if (key === 'loginLockStatus') {
            this.dialogBindData[key] = 0
          } else {
            this.dialogBindData[key] = ''
          }
        }
        this.dialogState = false
        this.isRouterAlive = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 实体店下拉框
      selectOneById() {

        system.selectOneById().then(res => {
          // console.log('实体店下拉框', res)
          this.options = res.data.data

        })
      },
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
